<template>
  <form
    id="data-form-container"
    class="MessageArea-editor"
    @submit.prevent="handleSubmit"
    ref="form"
  >
    <div class="username">
      <input
        type="text"
        placeholder="用户昵称"
        v-model="formData.name"
        :class="{ nolaw: formData.name.length > 10 }"
      />
      <span class="limit">{{ formData.name.length }}/10</span>
      <div class="error-tip">{{ error.name }}</div>
    </div>
    <div class="message">
      <textarea
        cols="30"
        rows="10"
        placeholder="输入内容"
        v-model="formData.content"
        :class="{ nolaw: formData.content.length > 300 }"
      ></textarea>
      <span>{{ formData.content.length }}/300</span>
      <div class="error-tip">{{ error.content }}</div>
    </div>
    <div class="submit-btn">
      <button :disabled="isSubmiting">
        {{ isSubmiting ? "提交中..." : "提交" }}
      </button>
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      error: {
        name: "",
        content: "",
      },
      formData: {
        name: "",
        content: "",
      },
      isSubmiting: false,
    };
  },
  methods: {
    isLaw() {
      this.error.name = "";
      this.error.content = "";
      let flag = true;
      if (!this.formData.name) {
        this.error.name = "请输入昵称";
        flag = false;
      } else if (this.formData.name.length > 10) {
        this.error.name = "请输入10个字以内的昵称";
        flag = false;
      }
      if (!this.formData.content) {
        this.error.content = "请输入内容";
        flag = false;
      } else if (this.formData.content.length > 300) {
        this.error.content = "请输入300个字以内的内容";
        flag = false;
      }
      return flag;
    },
    handleSubmit() {
      if (!this.isLaw()) {
        return;
      }
      this.isSubmiting = true; // 正在提交，防止重复点击
      this.$emit("submit", this.formData, async (successMsg) => { // 通知父组件处理事件，并且等待父组件的回调
        await this.$asyncShowMessage({ 
          content: successMsg,
          type: "success",
          duration: 1000,
          container: this.$refs.form,
        });
        this.isSubmiting = false;
        this.formData.name = "";
        this.formData.content = "";
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@/styles/var.less";
.username {
  position: relative;
  width: 450px;
  height: 40px;
  input {
    border: 2px dashed @lightWords;
    padding: 0 35px 0 8px;
    box-sizing: border-box;
    outline: none;
    width: 100%;
    height: 100%;
    line-height: 100%;
    &:focus,
    &:hover {
      border: 2px dashed @primary;
    }
  }
  span {
    color: @lightWords;
    position: absolute;
    right: 0.5em;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
  }
}
.nolaw {
  border: 2px dashed @danger!important;
}
.message {
  position: relative;
  margin-top: 30px;
  textarea {
    width: 100%;
    border: 2px dashed @lightWords;
    box-sizing: border-box;
    padding: 8px;
    outline: none;
    resize: none;
    font-size: 18px;
    &:focus,
    &:hover {
      border: 2px dashed @primary;
    }
  }
  span {
    position: absolute;
    color: @lightWords;
    font-size: 12px;
    right: 0.75em;
    bottom: 0.75em;
  }
}
.submit-btn {
  margin-top: 15px;
  button {
    background: @primary;
    cursor: pointer;
    width: 120px;
    height: 30px;
    line-height: 30px;
    color: white;
    border-radius: 5px;
    border-style: none;
    &:disabled {
      background: lighten(@primary, 20%);
      cursor: not-allowed;
    }
  }
}
.error-tip {
  color: @danger;
}
</style>